<template>
  <div class="app-container">
    <PageSearch
      :showSearch.sync="showSearch"
      :getList="getList"
      :handleQuery="handleQuery"
      :resetQuery="resetQuery">
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="skuNo">
              <el-input
                v-model="queryParams.packageNo"
                :placeholder="$t('包裹号')"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </template>
    </PageSearch>
    <el-table
      :height="calTableHeight()"
      v-loading="loading"
      ref="TableRef"
      :data="tableData"
      row-key="menuId">
      <el-table-column align="center" show-overflow-tooltip prop="id" :label="$t('id')" />
      <el-table-column align="center" show-overflow-tooltip prop="hash" :label="$t('原数据32位hash')" />
      <el-table-column align="center" show-overflow-tooltip prop="originalData" :label="$t('原数据')" />
      <el-table-column align="center" show-overflow-tooltip prop="packageNo" :label="$t('包裹号')" />
      <el-table-column
        width="90"
        align="center"
        show-overflow-tooltip
        prop="beforeExpressNo"
        :label="$t('原快递方式')" />
      <el-table-column
        width="90"
        align="center"
        show-overflow-tooltip
        prop="beforeTrilateralSize"
        :label="$t('原三边尺寸(cm)')" />
      <el-table-column
        width="90"
        align="center"
        show-overflow-tooltip
        prop="beforePackageNum"
        :label="$t('原包裹份数')" />
      <el-table-column
        width="90"
        align="center"
        show-overflow-tooltip
        prop="afterExpressNo"
        :label="$t('修改后快递方式')" />
      <el-table-column
        width="90"
        align="center"
        show-overflow-tooltip
        prop="afterTrilateralSize"
        :label="$t('修改后三边尺寸(cm)')" />
      <el-table-column
        width="90"
        align="center"
        show-overflow-tooltip
        prop="afterPackageNum"
        :label="$t('修改后包裹份数')" />
      <el-table-column align="center" prop="createTime" width="150" :label="$t('创建时间')" />
      <el-table-column align="center" prop="updateTime" width="150" :label="$t('修改时间')" />
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
import { orderPackageChange } from '@/api/distribution/orderBatchs/index'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  mounted() {
    this.getList()
  },

  data() {
    return {
      showSearch: false,
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  methods: {
    /** 查询菜单列表 */
    getList() {
      this.loading = true
      orderPackageChange(this.queryParams).then((res) => {
        this.tableData = res.rows || []
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped></style>
